<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyWords">
						<el-input v-model="queryParams.keyWords" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" />
					</el-form-item>
					<el-form-item label="审批状态" prop="deptId">
						<el-select v-model="queryParams.deptId" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in bus_examine_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="退款类型" prop="refundType">
						<el-select v-model="queryParams.refundType" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in refundType" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="提交时间" prop="sTime">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
						<!-- <el-date-picker @change="changeTime" v-model="time" value-format="YYYY-MM-DD" type="daterange"
							range-separator="至" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" size="large" /> -->
					</el-form-item>
					<el-form-item label="业务经理" prop="userId">
						<el-select v-model="queryParams.userId" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
				</div>
				<el-form-item style="margin-right: 0">
					<div class="flex col-center row-end">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<div>
					<span class="fb fs16">退款列表</span>
				</div>
				<div>
					<el-dropdown class="mr20" split-button type="" @command="handleRank">
						<span @click="rankFunc()">
							排序
							<img v-if="queryParams.sort == true" src="@/assets/images/rank.png" class="mr5" style="width: 10px;" alt=""/>
							<img v-else src="@/assets/images/rank1.png" class="mr5" style="width: 10px;" alt="" />
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="refund_number">退款编号</el-dropdown-item>
								<el-dropdown-item command="customer_name">关联客户</el-dropdown-item>
								<el-dropdown-item command="refund_amount">退款金额</el-dropdown-item>
								<el-dropdown-item command="refund_types">退款类型</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<el-button type="defaultBtn" v-hasPermi="['refund:add']" @click="handleApply">
						退款申请
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }" @selection-change="handleSelectionChange">
				<!-- <el-table-column type="selection" width="55" align="center" />  -->
				<el-table-column label="退款编号" align="center" prop="refundNumber" />
				<el-table-column label="客户姓名" align="center" prop="customerName" />
				<el-table-column label="退款金额" align="center" prop="refundAmount" />
				<el-table-column label="退款类型" align="center" prop="refundTypes"/>
				<el-table-column label="物流单号" align="center" prop="logisticsTrackingNumber" />
				<el-table-column label="审批状态" align="center">
					<template v-slot="scope">
						<div class="flex col-center row-center"
						:class="activeStatus(scope.row.approvalStatus)"
						>
							<span class="drop"></span>
							<dict-tag :options="bus_examine_status" :value="scope.row.approvalStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="提交时间" align="center" prop="submissionTime" />
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleDetail(scope.row)"
						v-hasPermi="['refund:detail']"
						>详情</el-button>
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
						v-hasPermi="['refund:edit']"
						>编辑</el-button>
						<el-button size="mini" type="text" @click="handleDelete(scope.row)"
						v-hasPermi="['refund:remove']"
						>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<refundPop ref="dialogRefund" @getList="getList"></refundPop>
		<!-- 退款详情弹窗 -->
		<refundDetailPop ref="detail"></refundDetailPop>
	</div>
</template>
<script>
	
	import {
		refundList, //列表
		delRefundList ,//删除
		refundAdd,// 新增退款申请
		refundDetail,//详情
		refundEdit,//编辑提交
	} from "@/api/business/refund";
	import {
		orderNumberDetail
	} from  "@/api/business/order";
	
	import refundPop from "./components/refundContent.vue"//退款弹窗
	import refundDetailPop from "./components/refundDetailPop.vue"//退款弹窗
	export default {
		components: {
			refundDetailPop,//退款详情弹窗
			refundPop
		},
		data() {
			return {
				
				bus_examine_status: this.useDict('bus_examine_status').bus_examine_status,
				bus_product_specification_unit:this.useDict('bus_product_specification_unit').bus_product_specification_unit,//单位
				refundType: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '仅退款'
					},
					{
						value: 2,
						label: '退货退款'
					}
				], //退款类型
				returnType: [{
						value: 0,
						label: '全部退货'
					},
					{
						value: 1,
						label: '部分退货'
					},
					{
						value: 2,
						label: '无需退货'
					}
				], //退款类型
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				time: '',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					refundType: '',
					userId: '', //用户id
					deptId: '', //部门id
					sTime: '', //开始时间
					eTime: '', //结束时间
					sortKey: '',
					sort: true, //true升序 false降序
				}, //查询参数
				ids: [],
				multiple: true,
				dialogVisible: false,
				form: {
					id:'',
					customerId: '', //客户ID
					refundType: 0, //是否退货（0全部退或，1部分退款 2无需退回）
					logisticsTrackingNumber: '', //物流单号
					businessManager: '', //业务经理id
					refundDescription: '', //退款描述
					uploadAttachment: '', //上传附件
					submissionTime: '', //提交时间
					supervisorApprovalRemark: '', //业务退款描述
					refundAmount:'', //退款金额
					commondityList: [
						// {
						// 	commondityId: '', //商品id
						// 	commondityCount: '', //商品编码
						// 	commondityName: '', //商品名称
						// 	commondityUnit: '', //商品单位
						// 	commondityPrice: '', //商品价格
						// 	commondityBatch: '', //商品批次
						// 	remark: '', //备注
						// 	refundNumber: '' //商品数量
						// },						
					] // 商品列表
				},
				rules:{
					customerName: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					refundType:[
						{
							required: true,
							message: '请选择',
							trigger: 'change'
						}
					],
					refundAmount:[
						{
							required: true,
							message: '请输入',
							trigger: 'blur'
						}
					]
				},
			}
		},
		created() {
			this.getList(1)
		},
		methods: {
			changeTime(e) {
				this.queryParams.sTime = e[0] + ' ' + '00:00:00'
				this.queryParams.eTime = e[1] + ' ' + '23:59:59'
				// this.getList();
			},
			//查询列表
			getList(num) {
				this.loading = true;
				refundList(this.queryParams).then((response) => {
					this.list = response.rows;
					for(let key in this.list){
						for(let j in this.returnType){
							if(this.list[key].refundType == this.returnType[j].value){
								this.list[key].refundTypes = this.returnType[j].label
							}
						}
					}
					this.total = response.total;
					this.loading = false;
					
				});
			},
			
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.time = ''
				this.$refs.clearPicker.clearPickerValue()
				this.queryParams.sTime = ''
				this.queryParams.eTime = ''
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 删除
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除编号为"' + ids + '"的数据项？')
					.then(function() {
						delRefundList(ids).then(res => {
							that.getList()
							that.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			//退款申请
			handleApply() {
				this.$refs.dialogRefund.open('')
				
			},
			//编辑
			handleUpdate(row){	
				this.$refs.dialogRefund.open(row.refundNumber)
				
			},
			// 排序
			rankFunc(){
				this.queryParams.sort = !this.queryParams.sort
				this.getList()
				this.$forceUpdate()
			},
			// 排序
			handleRank(e) {
				this.queryParams.sortKey = e
				this.getList()
			},
			//详情
			handleDetail(row){
				this.$refs.detail.open(row.refundNumber)
				return false;
				this.$router.push('/refund/refundDetail?id=' + row.refundNumber)
			},
			// 导出
			handleExport() {
				let that = this
				// this.queryParams.userId = this.ids.join(',')
				this.download(
					"/performance/exportUserPerformance", {
						...this.queryParams,
					},
					`UserPerformance_${new Date().getTime()}.xlsx`
				);
			},
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.multiple = !selection.length;
			},
		}
	}
</script>